<template>
  <view class="wrap">
    <view class="top">
      <view class="item">
        <view class="left">二级分销员手机号码</view>
        <input type="text" v-model="affiliateUser.tel" placeholder-class="line" placeholder="请输入手机号码" />
      </view>
      <view class="item address">
        <view class="left">申请描述</view>
        <textarea type="text" v-model="affiliateUser.remark" placeholder-class="line" placeholder="申请描述" />
      </view>
    </view>
    <view class="operAddress">
      <view class="item add" @tap="_doAdd">
        <u-icon name="plus" class="icon" :size="30"></u-icon>保存申请
      </view>
    </view>
  </view>
</template>

<script>
import {
  saveAffiliateLevel2User,
  queryAffiliateUser
} from "../../api/affiliate/affiliateApi";

import {
  isNull
} from '@/lib/java110/utils/StringUtil.js';

export default {
  data() {
    return {
      affiliateUser:{
        remark:'',
        tel: '',
      }
    };
  },
  computed: {

  },
  async onLoad(options) {
    await this._getAffiliateUser();
    if (!this.affiliateUser || this.affiliateUser.length === 0) {
      this.isApply = true;
    }
  },
  methods: {
    async _getAffiliateUser() {
      let param = {
        page: 1,
        row: 20
      };
      try {
        const data = await queryAffiliateUser(param);
        this.affiliateUser = data.data || [];
      } catch (error) {
        console.error('获取分销用户数据出错:', error);
      }
    },

    _doAdd: function() {
      if (isNull(this.affiliateUser.remark)) {
        uni.showToast({
          icon: 'none',
          title: '填写申请描述'
        });
        return ''
      }
      if (isNull(this.affiliateUser.tel)) {
        uni.showToast({
          icon: 'none',
          title: '填写二级分销员手机号码'
        });
        return ''
      }
      saveAffiliateLevel2User({
        tel: this.affiliateUser.tel,
        remark: this.affiliateUser.remark
      }).then(_data => {
        uni.showToast({
          icon: 'none',
          title: _data.msg
        });
        if (_data.code == 0) {
          uni.navigateBack({
            delta: 1
          });
          return;
        }
      })
          .catch(error => {
            uni.showToast({
              icon: 'none',
              title: error
            });
          })

    },

  }
};
</script>

<style lang="scss" scoped>
/deep/ .line {
  color: $u-light-color;
  font-size: 28rpx;
}

.placeholder {
  margin-left: 20upx;
  overflow: hidden;
  text-overflow: clip;
  white-space: pre;
  word-break: keep-all;
  pointer-events: none;
  line-height: inherit;
  color: #c0c4cc;
  font-size: 28upx;
}

.wrap {
  background-color: #f2f2f2;

  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;

    .item {
      display: flex;
      font-size: 32rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;

      .left {
        width: 300rpx;
      }

      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;

      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }

    .site-clipboard {
      padding-right: 40rpx;

      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }

      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: $u-tips-color;
        height: 80rpx;

        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    padding-right: 0;
    background-color: #ffffff;
    font-size: 28rpx;

    .default {
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;

      .tips {
        font-size: 24rpx;
      }

      .right {
        margin-right: 40rpx;
      }
    }
  }
}

.operAddress {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  left: 80rpx;
  font-size: 30rpx;

  .item {
    display: flex;
    align-items: center;
    color: #ffffff;
    border-radius: 60rpx;
    width: 280rpx;
    padding: 0 50rpx;

    .icon {
      margin-right: 10rpx;
    }
  }

  .minus {
    background-color: $u-type-info-disabled;
  }

  .add {
    background-color: $u-type-error;
  }

}

.saveAddress {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  left: 80rpx;
  background-color: red;
  border-radius: 60rpx;
  font-size: 30rpx;

  .add {
    display: flex;
    align-items: center;
    color: #ffffff;

    .icon {
      margin-right: 10rpx;
    }
  }
}
</style>
